<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <h2>一、是什么</h2>
  <div>css，即层叠样式表（Cascading Style Sheets）的简称，是一种标记语言，由浏览器解释执行用来使页面变得更为美观。css3是css的最新标准，是向后兼容的</div>
  <br>
  <h2>二、选择器</h2>
  <ul>
    <li>:nth-child(1);first-child;last-child等</li>
  </ul>
  <h2>三、新样式</h2>
  <ul>
    <li>border-radius：创建圆角边框</li>
    <li>box-shadow：为元素添加阴影</li>
    <li>border-image：使用图片来绘制边框</li>
    <li>background-clip</li>
    <li>background-size</li>
    <li>word-wrap: normal|break-word|break-all</li>
    <li>text-overflow: clip|ellipsis</li>
    <li>text-shadow</li>
    <li>颜色：rgba()</li>
  </ul>
  <h2>四、transition 过渡</h2>
  <div>transition属性可以被指定为一个或多个CSS属性的过渡效果，多个属性之间用逗号进行分隔</div>
  <br>
  <div>transition： CSS属性，花费时间，效果曲线(默认ease)，延迟时间(默认0)</div>
  <h2>五、transform 转换</h2>
  <div>transform属性允许你旋转，缩放，倾斜或平移给定元素</div>
  <br>
  <ul>
    <li>transform: translate(120px, 50%)：位移</li>
    <li>transform: scale(2, 0.5)：缩放</li>
    <li>transform: rotate(0.5turn)：旋转</li>
    <li>transform: skew(30deg, 20deg)：倾斜</li>
  </ul>
  <h2>六、animation 动画</h2>
  <div>动画这个平常用的也很多，主要是做一个预设的动画。和一些页面交互的动画效果，结果和过渡应该一样，让页面不会那么生硬</div>
  <br>
  <ul>
    <li>animation-name：动画名称    </li>
    <li>animation-duration：动画持续时间</li>
    <li>animation-timing-function：动画时间函数</li>
    <li>animation-delay：动画延迟时间</li>
    <li>animation-iteration-count：动画执行次数，可以设置为一个整数，也可以设置为infinite，意思是无限循环</li>
    <li>animation-direction：动画执行方向</li>
    <li>animation-paly-state：动画播放状态</li>
    <li>animation-fill-mode：动画填充模式</li>
  </ul>
  <h2>七、渐变</h2>
  <div>linear-gradient：线性渐变</div>
  <br>
  <div>background-image: linear-gradient(direction, color-stop1, color-stop2, ...);</div>
  <br>
  <div>radial-gradient：径向渐变</div>
  <br>
  <div>linear-gradient(0deg, red, green);</div>
  <h2>八、其他</h2>
  <div>flex弹性布局、Grid栅格布局</div>
</body>
</html>